<template>
  <div class="pr-department">
    <div class="pr-department-head">
      <el-input v-model="keyWord" placeholder="部门名称" clearable @change="query" />
      <el-button @click="query">查询</el-button>
      <el-button v-has type="primary" @click="addVisibleShow">新增</el-button>
    </div>
    <div>
      <el-table :data="tableData" border fit stripe>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row[item.title] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-has size="mini" @click="editVisibleShow(scope.row)">修改</el-button>
            <el-button v-has size="mini" type="danger" @click="deleteVisibleShow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="paging.current" :page-sizes="paging.sizes" :page-size="paging.size"
        layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>


    <!-- 新增弹框 -->
    <el-dialog title="新增部门" :visible.sync="addVisible" :close-on-click-modal="false" width="30%">
      <add-dialog v-if="addVisible" @chang="addVisibleHide" />
    </el-dialog>
    <!-- 修改弹框 -->
    <template v-if="editVisible">
      <el-dialog title="修改部门" :visible.sync="editVisible" :close-on-click-modal="false" width="30%">
        <edit-dialog v-if="editVisible" :row="row" @chang="editVisibleHide" />
      </el-dialog>
    </template>
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" :close-on-click-modal="false" width="30%">
      <span>是否确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteVisibleOk">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import AddDialog from './components/add.vue'
  import EditDialog from './components/edit.vue'

  export default {
    components: {
      AddDialog,
      EditDialog
    },
    data() {
      return {
        row: {},

        addVisible: false, // 新增弹框显示隐藏
        editVisible: false, // 修改弹框显示隐藏

        deleteVisible: false, // 删除弹框显示隐藏

        tableHead: [{
            id: 1,
            label: '部门简称',
            title: 'fullName'
          },
          {
            id: 2,
            label: '上级部门名称',
            title: 'pidName'
          },
          {
            id: 3,
            label: '创建时间',
            title: 'createTime',
          },
          {
            id: 4,
            label: '备注',
            title: 'remark'
          }
        ],
        tableData: [],


        keyWord: '',
        paging: {
          size: 10,
          sizes: [10, 30, 50, 100],
          total: 0,
          current: 1 // 分页默认开始显示页数
        },
      }
    },
    created() {
      // 获取部门列表
      this.getSysOrgList();
    },
    methods: {
      // 分页参数改变
      handleSizeChange(val) {
        if (this.paging.size !== val) {
          this.paging.size = val;
          this.getSysOrgList();
        }
      },
      handleCurrentChange(val) {
        if (this.paging.current !== val) {
          this.paging.current = val;
          this.getSysOrgList();
        }
      },
      // 重新查询
      query: function() {
        this.paging.current = 1;
        this.getSysOrgList();
      },

      // 获取部门列表
      getSysOrgList: function() {
        let params = {
          keyWord: this.$data.keyWord,
          page: this.paging.current,
          pageSize: this.paging.size,
        };
        this.$server.getSysOrgList(params).then(res => {
          let tableData = res.page.list;

          if (tableData.length == 0 && this.paging.current != 1) {
            this.paging.current = this.paging.current - 1;
            this.getSysOrgList();
          } else {
            this.tableData = tableData
            // 设置分页
            const paging = {
              sizes: [10, 30, 50, 100],
              current: res.page.currPage,
              size: res.page.pageSize,
              total: res.page.totalCount
            }
            this.paging = paging
          }
        })
      },

      // 添加部门
      addVisibleShow: function() {
        this.addVisible = true
      },
      addVisibleHide: function() {
        this.addVisible = false;
        this.getSysOrgList();
      },

      // 修改部门
      editVisibleShow: function(row) {
        this.row = row;
        this.editVisible = true
      },
      editVisibleHide: function() {
        this.editVisible = false;
        this.getSysOrgList();
      },

      // 删除部门
      deleteVisibleShow: function(row) {
        this.row = row;
        this.deleteVisible = true;
      },
      // 确认删除
      deleteVisibleOk: function() {
        let params = [this.row.id];
        this.$server.delSysOrg(params).then(res => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.deleteVisible = false;
          this.getSysOrgList();
        })
      },
    }
  }
</script>
<style lang="scss" scope>
  .pr-department {
    &-head {
      display: flex;
      padding: 20px;

      >div {
        margin-right: 20px;
      }

      .el-cascader {
        width: 200px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  .pr-dialog-assignRoles {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
